<template>
	<view class="page index">
		<view class="process-item">
			<view class="process">
				<view class="circle border" style="border-color: #0052D9;"></view>
				<view class="process-tab">
					发起
				</view>
			</view>
			<view class="main main-border">
				<view class="avatar">
					<image src="@/static/images/avatar.png" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="top">
						<view class="mem">
							{{status.startUser.nickname}}
						</view>
						<view class="right">
							<view class="status">
								发起
							</view>
							<view class="time">
								{{$share.getTime(status.startTime)}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="process-item" v-for="item in tasks" :key="item.id">
			<view class="process">
				<view :class="['circle', item.endTime ? 'border' : 'background']"></view>
				<view class="process-tab">
					{{item.name}}
				</view>
			</view>
			<view :class="['main', item.endTime && 'main-border']">
				<view class="avatar">
					<image src="@/static/images/avatar.png" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="top">
						<view class="mem">
							{{item.assigneeUser.nickname}}
						</view>
						<view class="right" :style="{color: `${item.color}`}">
							<view class="status">
								{{item.statusText}}
							</view>
							<view class="time">
								{{$share.getTime(item.endTime || item.createTime)}}
							</view>
						</view>
					</view>
					<view class="reason" v-if="item.status == 3">
						原因：{{item.reason}}
					</view>
				</view>
			</view>
		</view>
		<view class="process-item">
			<view class="process">
				<view :class="['circle', status.endTime && 'border']"></view>
				<view class="process-tab">
					完成
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getProcessInstanceIdApi} from "@/api/approval_api.js";
	export default{
		data(){
			return{
				id:0,
				status:{},//开始结束状态
				tasks: [],
			}
		},
		onLoad(e) {
			console.log(e)
			this.id = e.id;
			this.status = JSON.parse(decodeURIComponent(e.status));
			this.getProcessInstanceId();
		},
		methods:{
			//获得指定流程实例任务列表
			async getProcessInstanceId(){
				let res = await getProcessInstanceIdApi(this.id);
				// 1.1 移除已取消的审批
				res.data = res.data.map((item) => {
					let statusText = '';
					let color = '';
					switch(item.status){
						case 1: {
							statusText = '审批中';
							color = '#F4CE98';
							break;
						}
						case 2: {
							statusText = '已通过';
							color = '#A2EF4D';
							break;
						}
						case 3: {
							statusText = '不通过';
							color = '#f56c6c';
							break;
						}
						case 4: {
							statusText = '已取消';
							color = '#C9C9C9';
							break;
						}
						case 5: {
							statusText = '已退回';
							color = '#BD3124';
							break;
						}
						case 6: {
							statusText = '委派中';
							color = '#198AFA';
							break;
						}
					}
					return{
						...item,
						statusText,
						color
					}
				})
				res.data.forEach((task) => {
					if (task.status !== 4) {
						this.tasks.push(task)
					}
				})
				this.tasks.sort((a, b) => {
					if (a.endTime && b.endTime) {
						return a.endTime - b.endTime
					} else if (a.endTime) {
						return -1
					} else if (b.endTime) {
						return 1
					} else {
						return a.createTime - b.createTime
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 14rpx 28rpx;
		.process-item{
			.process{
				padding: 10rpx 0;
				@include flex-r-start-center;
				.circle{
					width: 16rpx;
					height: 16rpx;
					background-color: transparent;
					border-radius: 50%;
					border: 2rpx #DCDCDC solid;
					&.border{
						border-color: #0052D9;
					}
					&.background{
						background-color: #0052D9;
					}
				}
				.process-tab{
					padding-left: 44rpx;
					color: #101010;
					font-size: 32rpx;
				}
			}
			.main{
				padding-left: 50rpx;
				@include flex-r-start-start;
				border-left: 4rpx #DCDCDC solid;
				min-height: 108rpx;
				margin-left: 6rpx;
				&.main-border{
					border-color: #0052D9;
				}
				.avatar{
					flex: 0 0 auto;
					@include avatar(60);
				}
				.info{
					flex: 1 0 0;
					.top{
						@include flex-r-between-start;
						padding: 10rpx 0 0 20rpx;
						font-size: 28rpx;
						.mem{
							color: #7a7a7a;
						}
						.right{
							width: 336rpx;
							@include flex-r-between-center;
							color: #4095E5;
						}
					}
					.reason{
						margin: 14rpx 0 0;
						background-color: #BEBEBE;
						color: #fff;
						font-size: 26rpx;
						border-radius: 6rpx;
						line-height: 44rpx;
						padding: 0 20rpx;
					}
				}
			}
		}
	}
</style>